<template>
  <tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1000px" @open="open" @close="close">
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="100px" :disabled="disableEditSubmit || disableSave">
      <el-row>
        <el-col :span="24">
          <el-divider content-position="left"><span>1、【客户】相关信息</span></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户" prop="customerid" :required="true" :rules="rules.validateRequire">
            <el-input v-model="model.dispcustomerid" :disabled="true" class="tl-ref-selector">
              <el-button slot="append" type="primary" icon="el-icon-search" @click="openpmCustomerRefDialog" v-if="!disableEditSubmit"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业名称" prop="companyname" :rules="rules.validateRequire">
            <el-input v-model="model.companyname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="企业地址" prop="companyaddress" :rules="rules.validateRequire">
            <el-input v-model="model.companyaddress"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开户行名称" prop="bankname" :rules="rules.validateRequire">
            <el-input v-model="model.bankname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="银行账户" prop="bankaccount" :rules="rules.validateRequire">
            <el-input v-model="model.bankaccount"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="税号" prop="taxno" :rules="rules.validateRequire">
            <el-input v-model="model.taxno"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="companytel" :rules="rules.validateRequire">
            <el-input v-model="model.companytel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收件人" prop="receiver" :rules="rules.validateRequire">
            <el-input v-model="model.receiver"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收件人电话" prop="receivertel" :rules="rules.validateRequire">
            <el-input v-model="model.receivertel"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="邮寄地址" prop="detailmailaddress" :rules="rules.validateRequire">
            <el-cascader size="large" :options="areaData" v-model="selectedAreas" @change="changeArea" style="width:100%"> </el-cascader>
            <el-input v-model="model.detailmailaddress" placeholder="请输入详细地址"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="description">
            <el-input v-model="model.description" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-divider content-position="left"><span>2、【维护】相关信息</span></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维护部门" prop="deptname" :required="true" :rules="rules.validateRequire">
            <tl-ref-dept v-model="model.deptcode" :initDisplayData.sync="model.deptname" dataType="code" :singleSelect="true" @confirm="onSelectDept" :externalQueryParam="{ qry_enabled: 1 }"></tl-ref-dept>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护组织" prop="orgname">
            <el-input v-model="model.orgname" :readonly="true" class="is-disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="维护人" prop="username" :required="true" :rules="rules.validateRequire">
            <tl-ref-user v-model="model.usercode" :initDisplayData.sync="model.username" dataType="code" :singleSelect="true"></tl-ref-user>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维护人工号" prop="usercode">
            <el-input v-model="model.usercode" :readonly="true" class="is-disabled"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="有效" prop="enabled">
            <el-radio-group v-model="model.enabled">
              <el-radio :label="parseInt(item.code)" v-for="item in codeModel.enabledList" :key="item.code">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tl-approval-history ref="history" sourceType="PmCustomerBill" :sourceId="model.id" />
    <div slot="footer" class="dialog-footer">
      <el-button :type="disableEditSubmit === false ? 'text' : 'primary'" @click="doCancelEdit" v-if="uiOperateState <= 2">取消</el-button>
      <el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="!disableEditSubmit" :disabled="disableSave"> <svg-icon icon-class="save" />保存</el-button>
    </div>
    <tlpm-customer-ref ref="pmCustomerRef" @confirm="getpmCustomerRefData" :isSingleSelect="true"></tlpm-customer-ref>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from "@tapui/mixins/mixin_approval_edit"
/** 子组件 */
import tlpmCustomerRef from "@/views/ProjectManage/pmCustomer/refList.vue"
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from "@tapui/utils/http"
import { regionData, CodeToText, TextToCode } from "../../../utils/deal_area"
/** VUE配置 */
export default {
  mixins: [mixin_approval_edit],
  components: { tlpmCustomerRef },
  data() {
    return {
      moduleTitle: "客户开票档案",
      urlPrefix: "/pm/customerBill/",
      url: {
        // 额外的url
        queryOrgByDeptId: "/pm/customer/queryOrgByDeptId"
      },
      areaData: regionData,
      CodeToText: CodeToText,
      TextToCode: TextToCode,
      selectedAreas: []
    }
  },
  methods: {
    assignDefaultValue() {
      if (this.isAdd) {
        if (this.codeModel.flowidList.length > 0) {
          this.$set(this.model, "flowid", parseInt(this.codeModel.flowidList[0].id))
        }
        this.$set(this.model, "orgcode", this.org.code)
        this.$set(this.model, "orgname", this.org.name)
        this.$set(this.model, "deptcode", this.dept.code)
        this.$set(this.model, "deptname", this.dept.fullname)
        this.$set(this.model, "usercode", this.user.code)
        this.$set(this.model, "username", this.user.name)
      }
    },
    loaded() {
      // 页面加载完毕执行
      // 分拆省市区
      // this.splitAreas()
    },
    /** 编辑，发请求获得数据 */
    queryData(id) {
      if (!this.url.load) {
        this.$tap.alert("请设置load地址!", "warning")
        return
      }
      return getAction(this.url.load, { id: id }).then((res) => {
        if (res.success) {
          this.model = res.result
          this.splitAreas()
        } else {
          this.$tap.alert(res.message, "warning")
        }
      })
    },
    splitAreas() {
      const address = this.model.mailaddress2
      let selectedAreaCodes = []
      let detailmailaddress = ""
      if (address) {
        const addressArray = address.split("$")
        // 省编码
        const province = addressArray[0]
        const provinceCode = this.TextToCode[province].code
        selectedAreaCodes.push(provinceCode)
        // 市编码
        const city = addressArray[1]
        const cityCode = this.TextToCode[province][city].code
        selectedAreaCodes.push(cityCode)
        // 区编码
        const area = addressArray[2]
        const areaCode = this.TextToCode[province][city][area].code
        selectedAreaCodes.push(areaCode)
        detailmailaddress = addressArray[3]
      } else {
        detailmailaddress = this.model.mailaddress
      }
      this.$set(this, "selectedAreas", selectedAreaCodes)
      // 邮寄地址详细部分
      this.$set(this.model, "detailmailaddress", detailmailaddress)
    },
    onSelectDept(selectedDepts) {
      // 问题解决后，需要使用fullname
      const selectedDept = selectedDepts[0]
      const { id, code, fullname, orgname, orgcode } = selectedDept
      this.$set(this.model, "deptcode", code)
      this.$set(this.model, "deptname", fullname)
      const param = {
        deptId: id
      }
      getAction(this.url.queryOrgByDeptId, param).then((res) => {
        if (res.success) {
          const { code: orgcode, name: orgname } = res.result
          this.$set(this.model, "orgcode", orgcode)
          this.$set(this.model, "orgname", orgname)
        } else {
          this.$tap.alert("已选部门关联公司信息错误，请联系系统管理员")
        }
      })
    },
    /** 打开客户参照 */
    openpmCustomerRefDialog() {
      this.$refs.pmCustomerRef.visible = true
    },
    /** 获取客户参数数据 */
    getpmCustomerRefData(selectionRow, selectKey, selectionValue) {
      const { id, name } = selectionRow
      this.$set(this.model, "customerid", selectionRow.id)
      this.$set(this.model, "dispcustomerid", selectionRow.name)
      this.$set(this.model, "companyname", selectionRow.name)
      this.$set(this.model, "companyaddress", selectionRow.address)
    },
    changeArea(value) {
      // 调试使用
      console.log(value)
    },
    /** 提交前执行 */
    beforeSubmit() {
      if (this.selectedAreas.length === 0) {
        this.$tap.alert("请选择地址中的省市区")
        return false
      }
      this.joinAreas()
      return true
    },
    joinAreas() {
      let proAndCityAndArea = ""
      let proAndCityAndAreaWithDelimiter = ""
      for (let selectedArea of this.selectedAreas) {
        proAndCityAndArea += this.CodeToText[selectedArea]
        proAndCityAndAreaWithDelimiter = proAndCityAndAreaWithDelimiter + this.CodeToText[selectedArea] + "$"
      }
      if (this.model.detailmailaddress) {
        proAndCityAndArea += this.model.detailmailaddress
        proAndCityAndAreaWithDelimiter += this.model.detailmailaddress
      }
      this.model.mailaddress = proAndCityAndArea
      this.model.mailaddress2 = proAndCityAndAreaWithDelimiter
    }
  }
}
</script>
